<template>
	<!-- 任务管理 -->
	<div class="task">
		<div class = "tabTitle">
			<span>情况报告</span>
		</div>
		<div class="search">
			<div class = "searchLeft">
				<div style="display:inline-block;margin-top:20px;">
					<span>单位/部门：</span>
					<el-select v-model = "queryParam.orgId" placeholder = "全部" style = "width:154px;margin-right:20px;height:36px">
						<el-option v-for = "item in orgIdOPtions" :key = "item.id" :label = "item.name" :value = "item.id"></el-option>
					</el-select>
				</div>
				<div style="display:inline-block;margin-top:20px;">
					<span>任务标题：</span>
					<el-input v-model = "queryParam.title" placeholder = "请输入内容" style = "width:154px;margin-right:20px"></el-input>
				</div>
				<div style="display:inline-block;margin-top:20px;">
					<div style="display: inline-block;margin-right:12px">
						<span class = "demonstration">汇报时间：</span>
						<el-date-picker
							placeholder = "开始日期"
							style = "width:160px;margin-right:12px"
							v-model = "queryParam.startLocalDate" 
							:clearable = "false"
							value-format="yyyy-MM-dd"
							:picker-options="startPickerOptions"
						></el-date-picker>至
						<el-date-picker
							placeholder = "结束日期"
							style = "width:160px;margin-left:12px"
							v-model = "queryParam.endLocalDate"
							:clearable = "false"
							value-format="yyyy-MM-dd"
							:picker-options="endPickerOptions"
						></el-date-picker>
					</div>
				</div>
				<div style="display:inline-block;margin-top:20px;">
					<span>类型：</span>
					<el-select v-model = "queryParam.type" placeholder = "全部" style = "width:154px;margin-right:20px;height:36px">
						<el-option :label = "'全部'" :value = "''"></el-option>
						<el-option v-for = "(item, index) in typeOPtions" :key = "index" :label = "item.itemName" :value = "item.itemValue"></el-option>
					</el-select>
				</div>
				<el-button type = "primary" style = "width:52px;margin-left: 20px;padding:0px;height:36px;margin-top:20px;" @click = "query" >查询</el-button>
				<el-button style = "width:52px;margin-left: 20px;padding:0px;height:36px;margin-top:20px;" @click = "resetQueryParam">重置</el-button>
				
			</div>
			<div style="display:inline-block;margin-top:20px;">
				<el-button type="primary" style = "width:80px;margin-left: 12px;padding:0px;height:36px" v-if="this.permissionBycode.includes(this.code + '-xz')"  @click="downLoadMore" >批量下载</el-button>
			</div>
		</div>
		<div class="table_data">
			<tableComponent ref = "tableComponent" :tableData = "tableData" :tableLabel = "tableLabel" :tableOption = "tableOption" @selection-change = "handleSelectChange" />
		</div>
		<div class="pagination_wrap">
			<el-pagination
				background
				@size-change = "handleSizeChange"
				@current-change = "handleCurrentChange"
				:page-sizes = "paginationPageSizes"
				layout = "total, prev, pager, next, sizes,jumper"
				:current-page.sync = "paginationParam.currentPage"
				:page-size = "paginationParam.pageSize"
				:total = "paginationParam.total"
				style = "font-weight:400;"
			></el-pagination>
		</div>
	</div>
</template>
<script>
	import Urging from "../../../../components/Popup/Urging.vue";
	let _that
	export default {
		components: {
			Urging,
			tableComponent : () => import('../../comonComponent/table')
		},
		data() {
			return {
				// new
				code: 'jdjb-zxjd-qkbg',
				queryParam: {
					title: '', // 标题
					type:'', // 会议类型 
					orgId: '',
					startLocalDate: "", //发布时间开始时间
					endLocalDate: "", // 发布时间结束时间
				},
				typeOPtions: [], //任务类型配置
				orgIdOPtions: [],
				// 分页配置参数
				paginationPageSizes: [10, 30, 50],
				paginationParam: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
				},
				//old
				//表格数据
				tableData: [],
				tableLabel: [
					{ type : 'selection', width : '60', minWidth: '50', fixed : false, render : false, align : 'center'},
					{ type : 'index',label : '序号', width : '60', minWidth: '50', fixed : false, render : false, align : 'center'},
					{ prop : 'orgName', label : '单位/部门', minWidth: '460', fixed : false, render : false, align : 'center'},
					{ prop : 'name', label : '汇报标题', minWidth: '220', fixed : false, render : false, align : 'center'},
					{ prop : 'title', label : '任务标题', minWidth: '120 ', fixed : false, render : false, align : 'center',},
					{ prop : 'type', label : '任务类型' , minWidth: '150', fixed : false, render : false, align : 'center',
						render : (h, params, data) => { 
							return h( 'span', {}, this.typeOPtions.find(item => item.itemValue === params.row.type) ? this.typeOPtions.find(item => item.itemValue === params.row.type).itemValue : '')
						}
					},
					{ prop : 'timeout', label : '是否超时', minWidth: '220', fixed : false, render : false, align : 'center',
						render : (h, params, data) => { 
							return h( 'span', { attrs : { style: 'color :' + (params.row.timeout === '1' ? 'red' : '') }}, (params.row.timeout === '0' ? '否' : params.row.timeout === '1' ? '是' : ''))
						}
					},
					{ prop : 'createdTime', label : '汇报时间', minWidth: '220', fixed : false, render : false, align : 'center'},
					{ prop : 'action', label : '操作', minWidth: '250', fixed : false, option: [],align : 'center',
						render : (h, params, data) => { 
							return h( 'span', {}, [ 
								h( "el-button", {style: {display:this.permissionBycode.includes(this.code + '-xq') ? '' : 'none'}, attrs : {style: 'margin-right: 20px'}, class:'', props:{ size: 'mini' }, on : {
									click : () => {
										this.preview(params)
									}
								} }, '查看' ), 
								h( "el-button", {style: {display:this.permissionBycode.includes(this.code + '-xz') ? 'inlineblock' : 'none'}, class:'', props:{ type: 'primary', size: 'mini' }, on : {
									click : () => {
										this.downLoad(params)
									}
								} }, '下载')
							])
						} 
					}
				],
				tableOption : {
					loading: true,
					stripe: false,
					highlightCurrentRow : false,
					border : true,
					height : 610,
					maxHeight : '',
					resizable: false,
					headerCellStyle: {lineHeight: '46px', background: '#FAFAFA', padding: 0 },
					cellStyle: {height: '50px', padding: 0 }
				},
				tableSelection: [],
				startPickerOptions: {
					disabledDate(time) {
						return _that.queryParam.upTimeEnd ? (time.getTime() > new Date(_that.queryParam.upTimeEnd).getTime()) : ''
					}
				},
				endPickerOptions: {
					disabledDate(time) {
						return _that.queryParam.upTimeStart ? (time.getTime() < new Date(_that.queryParam.upTimeStart).getTime()) : ''
					}
				}
			}
		},
		computed: {
			permissionBycode(){
				return this.$store.getters['PortalManagement/getPermissionBycode'](this.code)
			},
			role() {
				if (this.permissionBycode.includes(this.code + '_manage')) {
					return 'manage'
				} else if (this.permissionBycode.includes(this.code + '_upload')) {
					return 'upload'
				} else {
					return 'upload'
				}
			},
		},
		mounted() {
			if(!this.permissionBycode.includes(this.code + '-xq') && !this.permissionBycode.includes(this.code + '-hb')) {
				this.tableLabel.splice(this.tableLabel.length-1, 1)
			}
			// 初始化列表数据获取
			_that = this
			this.queryData()
			this.dictList('TASK_TYPE')
			this.getSituationOrgList()
		},
		methods: {
			// 字典查询接口
			dictList(typeCode, pItemValue) {
				this.Api.Fenlei({typeCode:typeCode, pItemValue : pItemValue}).then(res =>{
					if(res && res.code === '0') {
						this.typeOPtions = res.data
					} else {
						this.typeOPtions = []
						this.$message.warning(res.message)
					}
					
				})
			},
			// 单位列表
			getSituationOrgList () {
				this.Api.getSituationOrgList().then(res => {
					if (res && res.code === '0') {
						this.orgIdOPtions = res.data
					} else {
						this.orgIdOPtions = []
						this.$message.warning(res.message)
					}
				})
			},
			// 任务管理的数据列表数据获取
			queryData () {
				this.tableOption.loading = true
				let data = JSON.parse(JSON.stringify(this.queryParam)) 
				data.orgId = data.orgId === '' ? '' : Number(data.orgId)
				data.pageNum = this.paginationParam.pageNum.toString()
				data.pageSize = this.paginationParam.pageSize.toString()
				this.Api.getSpecialReportedlist(data).then((res) => {
					if (res && res.code === "0") {
						this.tableData = res.data.records
						this.paginationParam.total = res.data.total
					} else {
						this.tableData = []
						this.paginationParam.total = 0
						this.$message.warning(res.message)
					}
					this.tableOption.loading = false
				});
			},
			// 查询点击事件
			query() {
				this.queryData()
			},
			// 分页pageSize 改变触发事件 
			handleSizeChange(val) {
				this.paginationParam.pageSize = val
				this.queryData()
			},
			// 分页currentPage 改变触发事件
			handleCurrentChange(val) {
				this.paginationParam.pageNum = val
				this.queryData()
			},
			// 搜索栏重置事件
			resetQueryParam() {
				Object.assign(this.$data.queryParam, this.$options.data().queryParam)
				this.queryData()
			},
			// 一键下载
			downLoadMore() {
				let urgIds = this.tableSelection.filter(item => { return Number(item.reportSum) / Number(item.total) < 1 }) || []
				if (urgIds.length === 0) {
					this.$message.warning('请选择正确的数据')
				} else {
					this.$confirm('确定下载选中的信息吗？', '一键催办', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						// this.presstask(urgIds)
					})
				}
			},
			download(data) {
				let datas ={
					ids: data.row.id
				}
				this.Api.getSuperviseSituationDownload(datas).then((res) => {
					if (res.code === "0") {
					}
				});
			},

			// 查看事件
			preview (params) {
				this.$router.push({ path: '/index/SuperviseAndReport/Task/DetailContainer', query: {id: params.row.id, role: this.role, comeFrom: 'TaskReportTable'}})
			},
			// 创建事件
			taskCreate () {
				this.$router.push("/index/SuperviseAndReport/Task/CreatTask");//创建任务
			},
			handleSelectChange (selection) {
				this.tableSelection = selection.slice(0)
			}
		}
	};
</script>
<style lang="less" scoped>
	.task {
		width: 100%;
		padding:20px 20px 10px 20px;
		margin-bottom: 20px;
		background: #fff; 
		.tabTitle {
			line-height: 28px;
			font-size: 20px;
			color: #333333;
			font-weight: 600;
			user-select:none;
		}
		.search {
			margin: 20px 0;
			width:100%;
			display: flex;
			/deep/ .el-input__inner {
			height: 36px;
			}
			/deep/.el-icon-date
			{
			line-height: 36px;
			position: absolute;
				left: 120px;
			}
			/deep/.el-icon-arrow-up{
			line-height: 36px;
			}
			.searchLeft {
				flex: 1;
			}
		}
		.table_data {
			flex: 1;
		}
		.pagination_wrap {
			display: flex;
			justify-content: flex-end;
			bottom: 0;
			right: 0;
			/deep/ .el-pagination {
			margin-top: 0;
			padding-top:20px;
			padding-bottom:20px;
			line-height: normal;
			}
		}
	}
</style>